<template>
  <div class="box-content">
    <div class="box-content-header">
      <p>隐患分析</p>
    </div>
    <div class="box-content-body">
      <div class="l">
        <div class="w1 h1 "
          ref="yinhuanleixing">
        </div>
      </div>
      <div class="r">
        <div class="title-p">
          <p>统计数据</p>
        </div>
        <div class="inline-box">
          <div class="inline-box-icon">
            <div class="img">
              <svg-icon icon-class='anquantianshu' />
            </div>
            <p>
              安全天数
            </p>
            <h2>{{base.safeDays}}</h2>
          </div>
          <div class="inline-box-icon">
            <div class="img">
              <svg-icon icon-class='baojingshu' />
            </div>
            <p>
              报警数
            </p>
            <h2>{{base.unsettledCounts}}</h2>
          </div>
          <div class="inline-box-icon">
            <div class="img">
              <svg-icon icon-class='jiejueyinhuan' />
            </div>
            <p>
              解决隐患
            </p>
            <h2>{{base.settledCounts}}</h2>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getHiddenDanger } from '@/api'
let resize = null
export default {
  props: {
    companyId: {
      type: String,
      default: ''
    }
  },
  watch: {
    companyId() {
      this.init()
    }
  },
  data: () => ({
    base: {}
  }),
  mounted() {
    this.init()
  },
  beforeDestroy() {
    if (resize) {
      window.removeEventListener('resize', resize)
    }
  },
  methods: {
    async init() {
      const vm = this
      const companyId = vm.companyId
      if (!companyId) return
      const params = { companyId }
      const { data, code } = await getHiddenDanger(params)
      if (code !== 200) return
      const { hiddenDangerRate, hiddenDangerStatistic } = data
      vm.base = { ...hiddenDangerStatistic }
      vm.initChart(hiddenDangerRate)
    },
    initChart(hiddenDangerRate) {
      const { rateList, troubleTypeList } = hiddenDangerRate
      const legend = []
      const data = []
      rateList.forEach(t => {
        const name = troubleTypeList.find(
          y => y.statisticType === t.statisticType
        ).des
        const value = t.rate
        if (value) {
          data.push({
            value,
            name
          })
          legend.push(name)
        }
      })
      const color = [
        '#FD0100',
        '#FF79E3',
        '#FFBF00',
        '#0DE829',
        '#3A8EFE',
        '#FAD094',
        '#4100C0',
        '#C0C142'
      ]
      this.$nextTick(() => {
        const dom = this.$refs.yinhuanleixing
        const chart = this.echarts.init(dom)
        const option = {
          legend: {
            x: 'center',
            y: 'bottom',
            data: legend,
            textStyle: {
              color: '#fff'
            }
          },
          color,
          series: [
            {
              name: '半径模式',
              type: 'pie',
              radius: [30, 60],
              center: ['50%', '30%'],
              label: {
                normal: {
                  show: false,
                  position: 'inside',
                  color: '#fff',
                  formatter(params) {
                    let { value } = params
                    if (value <= 0) {
                      return ''
                    }
                    value = (value * 100).toFixed(2)
                    return value + '%'
                  }
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '14',
                    fontWeight: 'bold'
                  }
                }
              },
              data: [...data]
            }
          ]
        }
        chart.setOption(option)
        resize = () => chart.resize()
        window.addEventListener('resize', resize)
      })
    }
  }
}
</script>
